<template>
  <div class="profit">
    <div class="profit-top">
      <div class="profit-top-one">
        <div class="profit-top-one-done">{{ incomeInfo.allRebate }}</div>
        <div class="profit-top-one-dtwo">总收入(元)</div>
        <div class="profit-top-one-dthree">
          <div class="profit-top-one-dthree-item">
            <p class="profit-item-pone">{{ incomeInfo.todayRebate }}</p>
            <p class="profit-item-ptwo">今日收益(元)</p>
          </div>
          <div class="profit-top-one-dthree-item">
            <p class="profit-item-pone">
              {{ distributeProfit.todayDistributeCount }}
            </p>
            <p class="profit-item-ptwo">今日收益(笔)</p>
          </div>
          <div class="profit-top-one-dthree-item">
            <p class="profit-item-pone">
              {{ distributeProfit.todayProfitCount }}
            </p>
            <p class="profit-item-ptwo">今日奖金(笔)</p>
          </div>
        </div>
      </div>
      <div class="profit-top-two">
        <img
          :src="
            require('../assets/image/icon_grade_item' + userInfo.grade + '.png')
          "
          width="42"
          height="42"
          alt=""
        />
        <div class="profit-top-two-count">
          <p class="profit-top-two-count-pone">{{ userInfo.gradeName }}</p>
          <p class="profit-top-two-count-ptwo">当前等级</p>
        </div>
        <div class="profit-top-two-right">立即升级</div>
      </div>
      <div class="profit-top-three">
        <img
          src="../assets/image/icon_profit_money.png"
          width="39"
          height="39"
          alt=""
        />
        <div class="profit-top-three-count">
          <p class="profit-top-three-count-pone">{{ account.rebateBalance }}</p>
          <p class="profit-top-three-count-ptwo">可转出收益</p>
        </div>
        <div class="profit-top-three-right">提现</div>
      </div>
    </div>
    <van-grid :column-num="4">
      <van-grid-item v-for="(item, index) in itemList" :key="'a' + index">
        <img slot="icon" :src="item.img" width="29" height="29" alt="" />
        <p slot="text">{{ item.text }}</p>
      </van-grid-item>
    </van-grid>
    <!-- end grid -->
    <div class="profit-echarts">
      <!-- <p>七日的收益图表</p> -->
      <div id="main" class="myEcharts"></div>
    </div>
    <tabbar />
  </div>
</template>
<script>
import * as echarts from "echarts";
import Tabbar from "./Tabbar.vue";
import {
  getApiIncomeInfo,
  getApiUserInfo,
  getApiOneWeekIncomeInfo,
  getApiDistributeProfit,
  getApiAccountInfo,
} from "network/ApiServe";
export default {
  components: { Tabbar },
  name: "Profit",
  created() {
    this.userId = localStorage.getItem("userId");
    this.token = localStorage.getItem("token");
  },
  data() {
    return {
      itemList: [
        {
          img: require("../assets/image/icon_profit_item1.png"),
          text: "收益记录",
        },
        {
          img: require("../assets/image/icon_profit_item2.png"),
          text: "我的费率",
        },
        {
          img: require("../assets/image/icon_profit_item3.png"),
          text: "交易统计",
        },
        {
          img: require("../assets/image/icon_profit_item4.png"),
          text: "排行榜",
        },
      ],
      incomeInfo: {},
      userInfo: {
        grade: 0,
      },
      seriesDateList: [0, 0, 0, 0, 0, 0, 0],
      // month: 0,
      // day: 0,
      monthDayList: [],
      distributeProfit: {},
      account: {},
    };
  },
  mounted() {
    this.getUserInfo();

    this.getIncomeInfo();
    this.getOneWeekIncomeInfo();
    this.getMonthDay();
    this.getAccountInfo();
    this.getDistributeProfit();
    // this.$nextTick(() => {
    //   this.myEcharts();
    // });
  },
  methods: {
    myEcharts() {
      let _this = this;
      let myChart = echarts.init(document.getElementById("main"));
      var option = {
        title: {
          text: "七日的收益图表",
        },

        tooltip: {
          trigger: "axis",

          axisPointer: {
            animation: false,
          },
        },
        // legend: {
        //   data: ["销量"],
        // },
        color: ["#1777ff"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: _this.monthDayList,
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },

        series: [
          {
            // data: [820, 932, 901, 1200, 1290, 1330, 1320],
            data: _this.seriesDateList,
            type: "line",
            areaStyle: {},
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#1777ff",
                  },
                  {
                    offset: 0.34,
                    color: "#1777ff",
                  },
                  {
                    offset: 1,
                    color: "rgba(38,197,254,0.00)",
                  },
                ]),
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    getIncomeInfo() {
      let _this = this;
      getApiIncomeInfo(_this.userId)
        .then((res) => {
          if (res.resp_code === "000000") {
            _this.incomeInfo = res.result;
            console.log(_this.incomeInfo, "incomeInfo");
          }
        })
        .catch((err) => {
          console.log(err, "getApiIncomeInfo");
        });
    },
    getUserInfo() {
      let _this = this;
      getApiUserInfo(_this.token)
        .then((res) => {
          if (res.resp_code === "000000") {
            _this.userInfo = res.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 7日收益
    getOneWeekIncomeInfo() {
      let _this = this;
      _this.seriesDateList = [];
      getApiOneWeekIncomeInfo(_this.token)
        .then((res) => {
          if (res.resp_code === "000000") {
            res.result.weekRebate.filter((item) => {
              _this.seriesDateList.push(item);
            });
          }
          _this.myEcharts();
        })
        .catch((err) => {
          console.log(err, "getApiOneWeekIncomeInfo");
        });
    },
    getMonthDay() {
      let timeSS = parseInt(new Date().getTime());
      console.log(timeSS, "TimeSS");
      let timeList = [];
      for (let i = 0; i < 7; i++) {
        let time = 0;
        time = timeSS - this.getTimeStamp(i);
        timeList.push(time);
        console.log(time, "time");
      }
      timeList = timeList.sort();
      for (let j = 0; j < timeList.length; j++) {
        let jj = this.getriqi(timeList[j]);
        this.monthDayList.push(jj);
      }
    },

    // 时间
    getriqi(time) {
      let date = new Date(time);
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "/";
      let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

      return M + D;
    },
    // 一天时间戳
    getTimeStamp(index = 1) {
      return 1000 * 60 * 60 * 24 * index;
    },
    //
    getDistributeProfit() {
      getApiDistributeProfit()
        .then((res) => {
          console.log(res, "getApiDistributeProfit");
          if (res.resp_code === "000000") {
            this.distributeProfit = res.result;
          }
        })
        .catch((err) => {
          console.log(err, "getApiDistributeProfit");
        });
    },
    getAccountInfo() {
      getApiAccountInfo(this.token)
        .then((res) => {
          console.log(res, "AccountInfo");
          if (res.resp_code === "000000") {
            this.account = res.result;
          }
        })
        .catch((err) => {
          console.log(err, "getApiAccountInfo");
        });
    },
  },
};
</script>
<style  scoped>
.profit {
  background-color: #f7f7f7;
  padding-bottom: 60px;
}
.profit-top {
  height: 383px;
}
.profit-top-one {
  height: 268px;
  background-color: var(--app-primary-theme-color);
}
.profit-top-two {
  height: 115px;
  background-color: #fff;
}
.profit-top-one-done {
  padding-top: 49px;
  font-size: 31px;
  color: #fff;
  text-align: center;
}
.profit-top-one-dtwo {
  margin-top: 5px;
  font-size: 15px;
  color: #fff;
  text-align: center;
}
.profit-top-one-dthree {
  margin-top: 42px;
  text-align: center;
  display: flex;
  align-items: center;
}
.profit-top-one-dthree-item {
  flex: 1;
}
.profit-item-pone {
  font-size: 20px;
  color: #fff;
}
.profit-item-ptwo {
  margin-top: 5px;
  font-size: 12px;
  color: #fff;
}
.profit-top-two {
  display: flex;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  align-items: center;
}
.profit-top-two-count {
  flex: 1;
}
.profit-top-two-count-pone {
  font-size: 15px;
  color: #444;
}
.profit-top-two-count-ptwo {
  margin-top: 2px;
  font-size: 12px;
  color: #999;
}
.profit-top-two-right {
  padding: 0 8px;
  color: #fff;
  background-color: var(--app-primary-theme-color);
  font-size: 13px;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  text-align: center;
}
.profit-top-three {
  height: 74px;
  margin-left: 12px;
  margin-right: 12px;
  background-color: #fff;
  box-shadow: 0px 1px 4px #999;
  border-radius: 12.5px;
  width: 351px;
  position: absolute;
  top: 224px;
  display: flex;
  align-items: center;
  padding-left: 15px;
  padding-right: 19px;
}
.profit-top-three-count {
  margin-left: 10px;
  flex: 1;
}
.profit-top-three-count-pone {
  font-size: 23px;
  color: #121212;
}
.profit-top-three-count-ptwo {
  font-size: 13px;
  color: #999;
}
.profit-top-three-right {
  font-size: 15px;
  color: var(--app-primary-theme-color);
  background-color: #f7f7f7;
  padding-left: 18px;
  padding-right: 18px;
  border-radius: 15px;
  line-height: 30px;
}
.van-grid-item {
  margin-top: 10px;
  height: 66px;
}
.van-grid-item p {
  margin-top: 4px;
  font-size: 12px;
  color: #444;
}
.profit-echarts {
  height: 300px;
  margin-top: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #fff;
}
.profit-echarts p {
  padding-top: 12px;
  padding-bottom: 8px;
  margin-left: 15px;
  font-weight: 600;
  font-size: 12px;
  color: #444;
}
.myEcharts {
  height: 320px;

  margin-left: 20px;
  margin-right: 10px;
}
</style>